<template>
  <div>
    <!-- 优惠券单元格 -->
    <van-cell title="选择优惠券" is-link @click="showList = true">
      已选择 {{ chosenCoupons.length }} 张优惠券
    </van-cell>
    <!-- 优惠券列表 -->
    <van-popup
        v-model:show="showList"
        round
        position="bottom"
        style="height: 90%; padding-top: 4px;"
    >
      <van-checkbox-group v-model="chosenCoupons">
        <van-checkbox
            v-for="(coupon, index) in coupons"
            :key="coupon.name + index"
            :name="coupon.id">
          {{ coupon.name + ' - 折扣' + coupon.valueDesc }}
        </van-checkbox>
      </van-checkbox-group>


      <van-button type="primary" block @click="confirmSelection">确定</van-button>
    </van-popup>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import { Popup, Checkbox, CheckboxGroup, Button, Cell } from 'vant';

const coupons = ref([
  {
    id: 1,
    available: 1,
    condition: '无门槛\n最多优惠12元',
    reason: '',
    value: 150,
    name: '优惠券名称',
    startAt: 1489104000,
    endAt: 1514592000,
    valueDesc: '1.5',
    unitDesc: '元',
  },
  {
    id: 2,
    available: 2,
    condition: '无门槛\n最多优惠12元',
    reason: '',
    value: 150,
    name: '优惠券名称1',
    startAt: 1489104000,
    endAt: 1514592000,
    valueDesc: '1.5',
    unitDesc: '元',
  }
]);

const showList = ref(false);
const chosenCoupons = ref([]);

const confirmSelection = () => {
  showList.value = false;
  console.log('Selected Coupons:', chosenCoupons.value.map(index => coupons.value.find(coupon => coupon.id === index)));
};
</script>
